
.device-mockup {
    position: relative;
    width: 100%;
    padding-bottom: 61.775701%;
}

.device-mockup > .device {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("macbook/macbook.png");
}

.device-mockup > .device > .screen {
    position: absolute;
    top: 11.0438729%;
    bottom: 14.6747352%;
    left: 13.364486%;
    right: 13.364486%;
    overflow: hidden;
}

.device-mockup > .device > .button {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    overflow: hidden;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    cursor: pointer;
}


/* DEVICES */

/* iPad */

.device-mockup.ipad,
.device-mockup.ipad.portrait {
    padding-bottom: 128.406276%;
}

.device-mockup.ipad.landscape {
    padding-bottom: 79.9086758%;
}

.device-mockup.ipad > .device,
.device-mockup.ipad.black > .device,
.device-mockup.ipad.portrait.black > .device {
    background-image: url("ipad/ipad_port_black.png");
}

.device-mockup.ipad.white > .device,
.device-mockup.ipad.portrait.white > .device {
    background-image: url("ipad/ipad_port_white.png");
}

.device-mockup.ipad.landscape > .device,
.device-mockup.ipad.landscape.black > .device {
    background-image: url("ipad/ipad_land_black.png");
}

.device-mockup.ipad.landscape.white > .device {
    background-image: url("ipad/ipad_land_white.png");
}

.device-mockup.ipad > .device > .screen,
.device-mockup.ipad.portrait > .device > .screen {
    top: 12.025723%;
    bottom: 12.154341%;
    left: 13.45995%;
    right: 13.45995%;
}

.device-mockup.ipad.landscape > .device > .screen {
    top: 13.87755102%;
    bottom: 13.87755102%;
    left: 11.5459883%;
    right: 11.5459883%;
}

.device-mockup.ipad > .device > .button,
.device-mockup.ipad.portrait > .device > .button {
    display: block;
    top: 90.2%;
    bottom: 5.5%;
    left: 47.3%;
    right: 47.3%;
}

.device-mockup.ipad.landscape > .device > .button {
    display: block;
    top: 47.3%;
    bottom: 47.3%;
    left: 90.8%;
    right: 4.9%;
}


